<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="../../static/js/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="../../static/js/jquery-3.3.1.min.js"></script>
    <script src="../../static/js/utils.js"></script>
    <style>
        .el-dialog {
            position: relative;
            margin: 0 auto 50px;
            background: #FFF;
            border-radius: 2px;
            -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
            box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
            box-sizing: border-box;
            width: 70%;
        }

        .el-color-picker__icon, .el-input, .el-textarea {
            display: inline-block;
            width: 50%;
        }

        .demo-form-inline .el-form-item{
            width: 250px;
        }

        .demo-form-inline .el-form-item input{
            width: 150px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div>
            <el-row :gutter="20">
                <el-col :span="12" :offset="8">
                    <h1 style="color: rgb(78, 78, 250);">查看未审批订单</h1>
                </el-col>
            </el-row>

            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="orderId" label="编号" width="200">
                </el-table-column>
                <el-table-column prop="clientName" label="客户" width="200">
                </el-table-column>
                <el-table-column prop="creator" label="创建人" width="200">
                </el-table-column>
                <el-table-column prop="audit_status" label="状态" width="200">
                    <template slot-scope="scope">
                        {{ scope.row.audit_status == '0' ? '待审核' : 's'}}
                    </template>
                </el-table-column>
                <el-table-column prop="lastModifier" label="最后修改人" width="200">
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="200">
                    <template fixed="right" slot-scope="scope">
                        <el-button @click="particulars(scope.row.id)" type="text" size="small">详细信息</el-button>
                        <el-button @click="updates(scope.row.id)" type="text" size="small">修改</el-button>
                        <el-popconfirm
                                confirm-button-text='通过'
                                cancel-button-text='不通过'
                                icon="el-icon-info"
                                icon-color="red"
                                title="审核？"
                                @confirm = "audit(scope.row.id,1)"
                                @cancel = "audit(scope.row.id,2)"
                        >
                            <el-button slot="reference" type="text" size="small">审核</el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>

            <el-dialog title="订单详情" width="1000px" :visible.sync="dialogTableVisible">
                <el-form :inline="true" :model="formData" class="demo-form-inline">
                    <el-form-item label="编号:">
                        <el-input disabled v-model="formData.orderId" placeholder="编号"></el-input>
                    </el-form-item>
                    <el-form-item label="客户:">
                        <el-input disabled v-model="formData.clientName" placeholder="客户"></el-input>
                    </el-form-item>
                    <el-form-item label="要货日期:" style="width: 340px" width="400px">
                        <el-input  disabled v-model="formData.createTime" placeholder="要货日期"></el-input>
                    </el-form-item>
                </el-form>
                <el-table :data="particularsData">
                    <el-table-column property="partCode" label="编号" width="150"></el-table-column>
                    <el-table-column property="partName" label="名称" width="150"></el-table-column>
                    <el-table-column property="price" label="单价" width="150"></el-table-column>
                    <el-table-column property="orderCount" label="订购数量" width="150"></el-table-column>
                    <el-table-column property="payCount" label="已付数量" width="150"></el-table-column>
                    <el-table-column property="totalPrice" label="总价" width="150"></el-table-column>
                </el-table>
            </el-dialog>

            <el-dialog title="订单修改" width="1000px" :visible.sync="dialogTableVisibleUpdate">
                <el-form :inline="true" :model="formData" class="demo-form-inline">
                    <el-form-item label="编号:">
                        <el-input disabled v-model="formData.orderId" placeholder="编号"></el-input>
                    </el-form-item>
                    <el-form-item label="客户:">
                        <el-link type="success" @click="clientParticulars(formData.client_id)">查看<i class="el-icon-view el-icon--right"></i></el-link>
                        <el-input disabled v-model="formData.clientName" placeholder="客户"></el-input>
                    </el-form-item>
                    <el-form-item label="要货日期:" style="width: 340px" width="400px">
                        <el-input  disabled v-model="formData.createTime" placeholder="要货日期"></el-input>
                        <el-link style="margin-left: 32px" @click="lookCarParts" type="success" icon="el-icon-edit">添加零件</el-link>
                    </el-form-item>
                </el-form>
                <el-table heigth="200" max-height="200" :data="particularsData">
                    <el-table-column property="partCode" label="编号" width="150"></el-table-column>
                    <el-table-column property="partName" label="名称" width="150"></el-table-column>
                    <el-table-column property="price" label="单价" width="150"></el-table-column>
                    <el-table-column property="orderCount" label="订购数量" width="150"></el-table-column>
                    <el-table-column property="payCount" label="已付数量" width="150">
                        <template slot-scope="scope">
                            {{0}}
                        </template>
                    </el-table-column>
                    <el-table-column property="totalprice" label="总价" width="150">
                        <template slot-scope="scope">
                            {{scope.row.price * scope.row.orderCount}}
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="200">
                        <template slot-scope="scope">
                            <el-button @click="updatesCar(scope.$index,particularsData)" type="text" size="small">修改</el-button>
                            <el-button @click="deletes(scope.$index,particularsData)" type="text" size="small">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-button @click="updateCarParts" type="primary">修改</el-button>
                <el-dialog width="90%" title="客户详情" :visible.sync="innerVisibleClient" append-to-body>
                    <el-descriptions class="margin-top" :column="2" border>
                        <el-descriptions-item label="客户编号">{{clientForm.clientnumber}}</el-descriptions-item>
                        <el-descriptions-item label="客户名称">{{clientForm.clientname}}</el-descriptions-item>
                        <el-descriptions-item label="简称">{{clientForm.shortcut}}</el-descriptions-item>
                        <el-descriptions-item label="客户经理">{{clientForm.clientmanager}}</el-descriptions-item>
                        <el-descriptions-item label="联系人">{{clientForm.linkman}}</el-descriptions-item>
                        <el-descriptions-item label="电话号码">{{clientForm.phonenumber}}</el-descriptions-item>
                        <el-descriptions-item label="邮政编码">{{clientForm.postalcode}}</el-descriptions-item>
                        <el-descriptions-item label="客户地址">{{clientForm.clientaddress}}</el-descriptions-item>
                        <el-descriptions-item label="电子邮箱">{{clientForm.email}}</el-descriptions-item>
                        <el-descriptions-item label="开户银行">{{clientForm.openbank}}</el-descriptions-item>
                        <el-descriptions-item label="银行账号">{{clientForm.bandnumber}}</el-descriptions-item>
                        <el-descriptions-item label="税号">{{clientForm.taxnumber}}</el-descriptions-item>
                        <el-descriptions-item label="省份">{{clientForm.province}}</el-descriptions-item>
                        <el-descriptions-item label="类型">{{clientForm.type}}</el-descriptions-item>
                        <el-descriptions-item label="备注">{{clientForm.remark}}</el-descriptions-item>
                    </el-descriptions>
                </el-dialog>
            </el-dialog>

            <el-dialog width="80%" title="全部零件" :visible.sync="dialogTableVisibleCarAll" append-to-body>
                <el-table :data="tableData3" style="width: 100%">
                    <el-table-column prop="partcode" label="零件编号" width="150"></el-table-column>
                    <el-table-column prop="partname" label="零件名称" width="150"></el-table-column>
                    <el-table-column prop="partplacecode" label="货位号" width="150"></el-table-column>
                    <el-table-column prop="partstore" label="当前库存量" width="150"></el-table-column>
                    <el-table-column prop="saleprice" label="价格" width="150"></el-table-column>
                    <el-table-column fixed="right" label="选择" width="200">
                        <template slot-scope="scope">
                            <el-button @click="selectCarParts(scope.row)" type="text" size="small">选择</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="block">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                   :current-page="currentPage1" :page-sizes="[5, 10, 15, 20]" :page-size="100"
                                   layout="total, sizes, prev, pager, next, jumper" :total="total">
                    </el-pagination>
                </div>
            </el-dialog>

            <el-dialog width="80%" title="添加购买零件数" :visible.sync="dialogTableVisibleCarParts" append-to-body>
                <el-form :inline="true" :model="carPartsForm02" class="demo-form-inline">
                    <el-form-item label="零件编号:">
                        <el-input readonly v-model="carPartsForm02.partCode" placeholder="编号"></el-input>
                    </el-form-item>
                    <el-form-item label="零件名称:">
                        <el-input readonly v-model="carPartsForm02.partName" placeholder="零件名称"></el-input>
                    </el-form-item>
                    <el-form-item label="单价:" style="width: 340px" width="400px">
                        <el-input  readonly v-model="carPartsForm02.price" placeholder="单价"></el-input>
                    </el-form-item>
                    <el-form-item label="请输入购买数量:" style="width: 340px" width="400px">
                        <el-input type="number" v-model="carPartsForm02.orderCount" placeholder="购买数量"></el-input>
                    </el-form-item>
                    <el-form-item style="width: 340px" width="400px">
                        <el-button type="primary" v-show="addBtn" @click="submitCar">添 加</el-button>
                        <el-button type="primary" v-show="updateBtn" @click="updateCar">修 改</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>

            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                               :current-page="currentPage1" :page-sizes="[5, 10, 15, 20]" :page-size="100"
                               layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                id: 0,
                page: 1,
                limit: 5,
                total: 0,
                currentPage1: 1,
                statusSelect: 0,
                updateCarIndex: 0, // 修改下镖
                userId: localStorage.getItem("id"), //获取管理员id
                tableData: [],
                particularsData: [],//购买零件数
                dialogTableVisibleCarParts: false,//添加购买零件数
                dialogTableVisibleCarAll: false,
                dialogTableVisible: false,
                dialogTableVisibleUpdate:false,
                innerVisible: false,
                innerVisibleClient: false,
                addBtn: false,//添加按钮
                updateBtn: false,//修改按钮
                visibles:false,
                clientData:[],
                clientForm:{},
                tableData3: [],//全部零件
                formData:{
                    orderid: '',
                    clientId: '',
                    clientName: '',
                    creator: '',
                    createtime: '',
                    particularsData : [],
                },
                carPartsForm:{
                    partstableId: '',
                    partcode: '',
                    partname: '',
                    price: '',
                    ordercount: 0,
                },
                carPartsForm02:{
                    ordersTable_id: '',
                    partsTable_id: '',
                    partCode: '',
                    partName: '',
                    price: '',
                    orderCount: 0,
                    totalPrice: 0,
                }
            },
            methods: {
                select() {
                    let _this = this;
                    selectAjax("get", '/orderstable/list', { status: '0',page: _this.page, limit: _this.limit }, _this.tableData2);
                },
                //查询成功后做的处理
                tableData2(data) {
                    this.tableData = data.data.data;
                    this.total = data.data.total;
                },
                //查看全部零件
                lookCarParts(){
                    let _this = this;
                    _this.dialogTableVisibleCarAll = true;
                    _this.statusSelect = 0;
                    selectAjax("get", '/carpartstable/listLimit',{page: _this.page, limit: _this.limit }, _this.tableData03)
                },
                tableData03(data){
                    this.tableData3 = data.data.data;
                    this.total = data.data.total;
                },
                //修改零件
                updateCarParts(){
                    let _this = this;
                    _this.formData.particularsData = _this.particularsData;
                    _this.formData.creator = _this.userId;
                    addOrUpdateAjax("post","/orderstable/update",_this.formData,function (res) {
                        _this.dialogTableVisibleUpdate = false;
                    })
                },
                //选择零件
                selectCarParts(row){
                    let _this = this;
                    _this.dialogTableVisibleCarParts = true;
                    _this.updateBtn = false;
                    _this.addBtn = true;
                    _this.carPartsForm02 = row;
                    _this.carPartsForm02.partsTable_id = row.id;
                    _this.carPartsForm02.price = row.saleprice;
                    _this.carPartsForm02.partCode = row.partcode;
                    _this.carPartsForm02.partName = row.partname;
                    console.log(_this.carPartsForm02)
                },
                //添加零件
                submitCar(){
                    let _this = this;
                    _this.dialogTableVisibleCarAll = false;
                    _this.dialogTableVisibleCarParts = false;
                    if (_this.particularsData.length == 0) {
                        _this.particularsData.push(_this.carPartsForm02);
                        return;
                    }

                    for (let i = 0; i < _this.particularsData.length; i++){
                        if (_this.carPartsForm02.partcode.indexOf(_this.particularsData[i].partcode) == 0){
                            _this.particularsData[i].ordercount = parseInt(_this.particularsData[i].ordercount) + parseInt(_this.carPartsForm02.ordercount);
                            return;
                        }
                    }
                    _this.particularsData.push(_this.carPartsForm02);
                },
                //修改零件
                updatesCar(index,row){
                    let _this = this;
                    _this.dialogTableVisibleCarParts = true;
                    _this.updateBtn = true;
                    _this.addBtn = false;
                    _this.updateCarIndex = index
                    _this.carPartsForm02 = row[index];
                },
                updateCar(){
                    let _this = this;
                    _this.dialogTableVisibleCarParts = false;
                    _this.particularsData[_this.updateCarIndex].ordercount = _this.carPartsForm02.orderCount;
                },
                //删除
                deletes(index,data){
                    data.splice(index,1);
                },
                //审核
                audit(id,status){
                    console.log(id,status)
                    let _this = this;
                    addOrUpdateAjaxNoJson("post","/orderstable/audit", {id : id,lastUpdatePerson: _this.userId,status : status},function (res) {
                        _this.select();
                    })
                },
                //查看详情
                selectAjaxs(id){
                    let _this = this;
                    selectAjax("get", '/orderstable/getById', { id: id }, _this.particularsData2)
                },
                particularsData2(data){
                    let _this = this;
                    _this.formData = data.data.data[0];
                    _this.particularsData = data.data.partsMapList;
                },
                particulars(id){
                    let _this = this;
                    _this.dialogTableVisible = true;
                    _this.selectAjaxs(id);
                },
                //修改订单
                updates(id){
                    let _this = this;
                    _this.dialogTableVisibleUpdate = true;
                    _this.selectAjaxs(id);
                },
                //客户详情
                clientParticulars(id){
                    let _this = this;
                    _this.innerVisibleClient = true;
                    selectAjax("get", '/clienttable/getById/'+id, null, function (data) {
                        _this.clientForm = data.data;
                    })
                },
                //分页
                handleSizeChange(val) {
                    let status = this.statusSelect;
                    this.limit = val;
                    if (status == 0){
                        this.select();
                    }else if (status == 1)
                        this.lookOver();

                },
                handleCurrentChange(val) {
                    let status = this.statusSelect;
                    this.page = val;
                    if (status == 0){
                        this.select();
                    }else if (status == 1)
                        this.lookOver();
                },
                closePage(statusSelect) {
                    this.page = 1;
                    this.limit = 5;
                    this.total = 0;
                    this.currentPage1 = 1;
                    this.statusSelect = statusSelect;
                }
            },
            mounted() {
                this.select();
            },
            watch:{
                innerVisible(val){
                    if (!val){
                        this.closePage(0);
                        this.select();
                    }
                }
            }
        })
    </script>
</body>
</html>